<!-- Copyright (c) 2012 Mobile Developer Solutions -->
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-type" name="viewport"  charset="utf-8"
          content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
    <title>NutriFood</title>

    <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.3.1.min.css"/>
    <link rel="stylesheet" href="index.css"/>
    <script src="jquery.mobile/jquery-1.7.2.min.js"></script>
    <script src="jquery.mobile/jquery.mobile-1.3.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
    <script type="text/javascript" charset="utf-8" src="index.js"></script>
    <script type="text/javascript">
        $('div').live('pageinit',function () {
            $("#result_popup").popup();
            $("#btn_calc").click(function () {
                var weight = $("#txt_weight").val();
                var sex=$('input[type=radio]:checked').val();
                var age=   $("#user_age").val();
                var work=   $("#work_type").val();
                var chcs=0;
                var hs=0;
                if(sex==1)
                {
                    switch (age)
                    {
                        case "1":chcs=60.9*weight-54;break;
                        case "2":chcs=22.7*weight-494;break;
                        case "3":chcs=17.5*weight+651;break;
                        case "4":chcs=15.3*weight+679;break;
                        case "5":chcs=11.6*weight+879;break;
                        case "6":chcs=13.5*weight+547;break;
                    };
                    switch(work)
                    {
                        case "1":hs=1.55;break;
                        case "2":hs=1.78;break;
                        case "3":hs=2.10;break;
                    }
                }
                else
                {
                    switch (age)
                    {
                        case "1":chcs=61*weight-51;break;
                        case "2":chcs=22.5*weight+499;break;
                        case "3":chcs=12.2*weight+746;break;
                        case "4":chcs=14.7*weight+946;break;
                        case "5":chcs=8.7*weight+892;break;
                        case "6":chcs=10.5*weight+596;break;
                    }
                    switch(work)
                    {
                        case "1":hs=1.56;break;
                        case "2":hs=1.61;break;
                        case "3":hs=1.82;break;
                    }
                }
                $("#result_chcs").text(chcs + " calories");
                $("#result_hs").text(hs);
                $("#result_calo").text(chcs*hs + " calories");
                $("#result_popup").popup("open");
            });
        });

    </script>
</head>
<body>
<div data-role="page" id="page1">
    <div data-theme="a" data-role="header">
        <h3>
            Calorie Calc
        </h3>
    </div>
    <div data-role="content">
        <div data-role="fieldcontain">
            <label for="txt_weight">
                Cân nặng:
            </label>
            <input name="" id="txt_weight" placeholder="" value="45" type="number">
        </div>
        <div id="user_sex" data-role="fieldcontain">
            <fieldset data-role="controlgroup" data-type="horizontal">
                <legend>
                    Giới tính:
                </legend>
                <input id="male" name="" value="1" type="radio" checked="true">
                <label for="male">
                    Nam
                </label>
                <input id="female" name="" value="2" type="radio">
                <label for="female">
                    Nữ
                </label>
            </fieldset>
        </div>
        <div data-role="fieldcontain">
            <label for="user_age">
                Nhóm tuổi:
            </label>
            <select id="user_age" data-native-menu="false" name="">
                <option value="1">
                    0-3
                </option>
                <option value="2">
                    4-10
                </option>
                <option value="3">
                    11-18
                </option>
                <option value="4">
                    19-30
                </option>
                <option value="5">
                    31-60
                </option>
                <option value="6">
                    &gt;61
                </option>
            </select>
        </div>
        <div data-role="fieldcontain">
            <label for="work_type">
                Loại lao động:
            </label>
            <select id="work_type" data-native-menu="false" name="">
                <option value="1">
                    Lao động trí óc
                </option>
                <option value="1">
                    Hành chính
                </option>
                <option value="1">
                    Nghề tự do
                </option>
                <option value="1">
                    Nội trợ
                </option>
                <option value="1">
                    Giáo viên
                </option>
                <option value="2">
                    Xây dựng
                </option>
                <option value="2">
                    Nông dân (nhẹ)
                </option>
                <option value="2">
                    Sinh viên
                </option>
                <option value="2">
                    Ngư dân
                </option>
                <option value="2">
                    Quân nhân nhẹ
                </option>
                <option value="3">
                    Vận động viên
                </option>
                <option value="3">
                    Công-nông nghiệp nặng
                </option>
                <option value="value">
                    Thợ mỏ
                </option>
                <option value="3">
                    Nghề rèn
                </option>
                <option value="3">
                    Lâm nghiệp
                </option>
                <option value="3">
                    Quân nhân (nặng)
                </option>
            </select>
        </div>
        <button id="btn_calc" data-theme="a">
            Calculate
        </button>

    </div>
</div>
<div data-role="popup" id="result_popup" class="ui-corner-all ui-popup ui-body-c ui-overlay-shadow"
     style="max-width:400px;" data-theme="c" data-overlay-theme="a" aria-disabled="false" data-disabled="false"
     data-shadow="true" data-corners="true" data-transition="none" data-position-to="origin">
    <div class="ui-corner-top ui-header ui-bar-a" data-theme="a" data-role="header" role="banner">
        <h1 class="ui-title" role="heading" aria-level="1">Result</h1>

    </div>
    <div class="ui-corner-bottom ui-content ui-body-d" data-theme="d" data-role="content" role="main">
        <p>Nhu cầu calories của bạn trong 1 ngày là</p>
        <table>
        <tr>
            <td><p> Chuyển hóa cơ sở:</p></td>
            <td><b><h id="result_chcs"  style="float: right;"/></b></td>
        </tr>
        <tr>
            <td><p> Hệ số năng lượng:</p></td>
            <td><b><h id="result_hs"  style="float: right;"/></b></td>
        </tr>
        <tr>
            <td><p>Tổng lượng calories:</p></td>
            <td><b><h id="result_calo"  style="float: right;"/></b></td>
        </tr>
        </table>
        <a class="ui-btn ui-shadow ui-btn-corner-all ui-btn-inline ui-btn-hover-c" data-theme="c" data-rel="back"
           data-inline="true" data-role="button" href="#" data-corners="true" data-shadow="true" data-iconshadow="true"
           data-wrapperels="span">
           <span class="ui-btn-inner ui-btn-corner-all">
            <span class="ui-btn-text">OK</span>
            </span>
        </a>
    </div>

</div>
</body>
</html>
